<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>特殊指令</title>
    <script src="vue.js"></script>
</head>
<body>
    


    <div id="app">
        <!-- v-once 只能渲染一次。const -->

        <!-- v-bind----vue提供的特殊指令：表示将这个元素的节点title特性和vue实例的aaa属性保持一致 -->
        <span v-bind:title="aaa">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>

        <!-- v-if控制切换一个元素是否显示 -->
        <p v-if='seen'>现在你看到我了</p>

        <!-- 特殊指令v-for='todo in 循环数组的名称'      绑定数组的数据来渲染一个列表 -->
        <ol>
            <li v-for='todo in todos'>
                {{todo.text}}
            </li>
        </ol>

        <!-- v-on添加事件监听器  -->
        <p>{{content}}</p>
        <button v-on:click="reverseContent">反转内容</button><!-- 当点击按钮时触发reverseContent函数 -->

        <!-- v-model  实现表单输入和应用状态之间的双向绑定 -->
        <p>{{main}}</p>
        <input type="text" v-model="main">
    </div>

    <script>
            // vue基础操作语法，特殊指令介绍
            var app = new Vue({
                el: '#app',
                data: {
                    // v-bind
                    aaa: '页面加载于'+new Date().toString(),
                    // 控制台输出app.message=""  app.name=""  app.aaa=""  ,页面会响应式变化
    
                    // v-if
                    seen: true,
                    //控制台输出app.seen=false  p元素在页面中就看不到了  记住此处不能加引号
    
                    // v-for
                    todos: [
                        {text: '学习js'},
                        {text: '学习vue'},
                        {text: '好事'}
                    ],
                    //在控制台输入app.todos.push({text:'新li'})，就可以在页面列表中添加一条新项
    
                    // v-on绑定事件
                    content: '我爱学习',
    
                    // v-model表单和p标签内容双向绑定
                    main: '请输入内容'
                },
                methods:{
                    reverseContent:function() {
                        this.content = this.content.split('').reverse().join('')
                    }
                }
            });
    
        </script>
</body>
</html>